<template>
  <view class="container">
    <view class="example">
      <uv-form ref="formRef" labelPosition="left" :model="dataFrom" :rules="rules" labelWidth="auto">
        <uv-form-item label="旧密码" prop="oldPassword" borderBottom required>
          <uv-input v-model="dataFrom.oldPassword" type="password" border="none"
                    placeholder="请输入旧密码"></uv-input>
        </uv-form-item>
        <uv-form-item label="新密码" prop="newPassword" borderBottom required>
          <uv-input v-model="dataFrom.newPassword" type="password" border="none"
                    placeholder="请输入新密码"></uv-input>
        </uv-form-item>
        <uv-form-item label="确认密码" prop="confirmPassword" borderBottom required>
          <uv-input v-model="dataFrom.confirmPassword" type="password" border="none"
                    placeholder="请再次输入新密码"></uv-input>
        </uv-form-item>
        <uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit()"></uv-button>
      </uv-form>
    </view>
  </view>

  <uv-toast ref="toast"></uv-toast>
</template>

<script lang="ts" setup>
import {onLoad, onReady} from '@dcloudio/uni-app';
import {getCurrentInstance, reactive, ref} from "vue";
import {editUserPwd} from "@/api/system/user";
import {pages} from '@/utils/page-url';

const {proxy} = getCurrentInstance();

const dataFrom = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const formRef = ref();
const toast = ref();
const rules = {
  oldPassword: [
    {
      type: 'string',
      required: true,
      message: '旧密码不能为空',
      trigger: ['blur', 'change']
    },
  ],
  newPassword: [
    {
      type: 'string',
      required: true,
      message: '新密码不能为空',
      trigger: ['blur', 'change']
    }, {
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
      // 正则检验前先将值转为字符串
      transform(value: any) {
        return String(value);
      },
      trigger: ['blur', 'change'],
      message: '新密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母'
    }
  ],
  confirmPassword: [
    {
      type: 'string',
      required: true,
      message: '确认密码不能为空',
      trigger: ['blur', 'change']
    }, {
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
      // 正则检验前先将值转为字符串
      transform(value: any) {
        return String(value);
      },
      message: '新密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母',
      trigger: ['blur', 'change']
    }, {
      // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
      validator: (rule: any, value: any, callback: any) => {
        // 此处业务逻辑省略
        // 返回true表校验通过，返回false表示不通过
        return dataFrom.newPassword === dataFrom.confirmPassword;
      },
      message: '两次密码输入不一致',
      trigger: ['blur']
    }
  ]
}

// 提交
const submit = () => {
  formRef.value.validate().then(async (res: any) => {
    const param: any = {
      oldPassword: dataFrom.oldPassword,
      newPassword: dataFrom.newPassword
    }
    const {code, msg} = await editUserPwd(param);
    if (code === 200) {
      showToast();
    } else {
      toast.value.show({
        type: 'error',
        message: msg,
        duration: 1500,
        position: 'top'
      })
    }
  });
}

const showToast = () => {
  toast.value.show({
    type: 'loading',
    message: "正在加载",
    duration: 500,
    complete() {
      // @ts-ignore
      proxy.$tab.reLaunch(pages.login);
    }
  })
}

onLoad(() => {

});

onReady(() => {
  formRef.value.setRules(rules);
});
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}
</style>
